<template>
    <div class="container">
<!--        <swiper :options="swiperOption" ref="swiperOption">-->
<!--            <swiper-slide>-->
<!--                <img src="../assets/images/swiper/s-01.jpg" alt="">-->
<!--            </swiper-slide>-->
<!--            <swiper-slide>-->
<!--                <img src="../assets/images/swiper/s-02.jpg" alt="">-->
<!--            </swiper-slide>-->
<!--            <swiper-slide>-->
<!--                <img src="../assets/images/swiper/s-03.jpg" alt="">-->
<!--            </swiper-slide>-->
<!--            &lt;!&ndash; Optional controls &ndash;&gt;-->
<!--            <div class="swiper-pagination"  slot="pagination"></div>-->
<!--        </swiper>-->


        <swiper :options="swiperOption" ref="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="(item, index) in slideList" :key="index">
                <a :href="'/#/product/' + item.sku_id">
                    <img :src="item.image" :alt="item.id">
                </a>
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>

        <div class="categorys">
            <div class="category-list">
                <div class="category-item">
                    <img src="../assets/images/category/tv.png" alt="">
                    <div class="item-text">剧集 <span> · </span></div>
                    <div class="item-list">
                        <div><a href="">中国大陆</a></div>
                        <div><a href="">中国香港</a></div>
                    </div>
                </div>
                <div class="category-item">
                    <img src="../assets/images/category/zy.png" alt="">
                    <div class="item-text">综艺 <span> · </span></div>
                    <div class="item-list">
                        <div><a href="">热门网综</a></div>
                        <div><a href="">真人秀</a></div>
                    </div>
                </div>
            </div>
            <div class="category-list">
                <div class="category-item">
                    <img src="../assets/images/category/dy.png" alt="">
                    <div class="item-text">电影 <span> · </span></div>
                    <div class="item-list">
                        <div>院线大片</div>
                        <div>免费</div>
                    </div>
                </div>
                <div class="category-item">
                    <img src="../assets/images/category/dm.png" alt="">
                    <div class="item-text">动漫 <span> · </span></div>
                    <div class="item-list">
                        <div>国漫</div>
                        <div>日漫</div>
                    </div>
                </div>
            </div>
            <div class="category-list">
                <div class="category-item">
                    <img src="../assets/images/category/tv.png" alt="">
                    <div class="item-text">剧集 <span> · </span></div>
                    <div class="item-list">
                        <div>中国大陆</div>
                        <div>中国香港</div>
                    </div>
                </div>
                <div class="category-item">
                    <img src="../assets/images/category/tv.png" alt="">
                    <div class="item-text">剧集 <span> · </span></div>
                    <div class="item-list">
                        <div>中国大陆</div>
                        <div>中国香港</div>
                    </div>
                </div>
            </div>

            <div class="category-right">
                <img src="../assets/images/category/member.png" alt="">
                <img src="../assets/images/category/zhibo.png" alt="">
                <img src="../assets/images/category/pianku.png" alt="">
            </div>
        </div>
        <div class="hots">
            <div class="hot-title">
                <div class="hot-tab">正在热播</div>
                <div class="tab-desc">这是一个副标题</div>
            </div>
            <div class="hot-items">
                <div class="hot-item">
                    <a href="/#/player/1">
                        <img src="../assets/images/demo/t-01.jpg" alt="">
                        <div class="title"><a href="">血鲨·致命追杀</a></div>
                        <div class="desc">深海人鲨大战一触即发</div>
                    </a>
                </div>
                <div class="hot-item">
                    <img src="../assets/images/demo/t-02.jpg" alt="">
                    <div class="title"><a href="">爱我😤老李你过分了</a></div>
                    <div class="desc">分手费1千万 姐还要拍婚纱</div>
                </div>
                <div class="hot-item">
                    <img src="../assets/images/demo/t-01.jpg" alt="">
                    <div class="title">血鲨·致命追杀</div>
                    <div class="desc">深海人鲨大战一触即发</div>
                </div>
                <div class="hot-item">
                    <img src="../assets/images/demo/t-02.jpg" alt="">
                    <div class="title">爱我😤老李你过分了</div>
                    <div class="desc">分手费1千万 姐还要拍婚纱</div>
                </div>
                <div class="hot-item">
                    <img src="../assets/images/demo/t-01.jpg" alt="">
                    <div class="title">血鲨·致命追杀</div>
                    <div class="desc">深海人鲨大战一触即发</div>
                </div>
                <div class="hot-item">
                    <img src="../assets/images/demo/t-02.jpg" alt="">
                    <div class="title">爱我😤老李你过分了</div>
                    <div class="desc">分手费1千万 姐还要拍婚纱</div>
                </div>
                <div class="hot-item">
                    <img src="../assets/images/demo/t-01.jpg" alt="">
                    <div class="title">血鲨·致命追杀</div>
                    <div class="desc">深海人鲨大战一触即发</div>
                </div>
                <div class="hot-item">
                    <img src="../assets/images/demo/t-02.jpg" alt="">
                    <div class="title">爱我😤老李你过分了</div>
                    <div class="desc">分手费1千万 姐还要拍婚纱</div>
                </div>
            </div>

        </div>
        <div class="tv-paly-list">
            <div class="list-title">
                <img src="../assets/images/category/tv.png" alt="">
                <div class="text">剧集</div>
                <div class="more">
                    <a href="">更多></a>
                </div>
            </div>
            <div class="tc-list">
                <div class="item-first">
                    <img src="../assets/images/demo/t-01.jpg" alt="">
                    <div class="title">
                        <a href="">这是标题</a>
                    </div>
                    <div class="desc">这里是描述这里是描述这里是描述这里是描述这里是描述</div>
                </div>
                <div class="list-item">
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                    <div class="hot-item">
                        <a href="/#/player/1">
                            <img src="../assets/images/demo/t-01.jpg" alt="">
                            <div class="title"><a href="">血鲨·致命追杀</a></div>
                            <div class="desc">深海人鲨大战一触即发</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    // import NavHeader from "../components/NavHeader";
    // import NavFooter from "../components/NavFooter";

    import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    export default {
        name: "Tv",
        data() {
            return {
                swiperOption:{
                    autoplay:true,
                    loop:false,
                    effect:'cube',
                    cubeEffect: {
                        shadowOffset: 100,
                        shadowScale: 0.6
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable:true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                },
                slideList:[
                    {
                        id:'42',
                        img:'public/images/swiper/s-01.jpg'
                    },
                    {
                        id:'45',
                        img:'/public/images/swiper/s-02.jpg'
                    },
                    {
                        id:'46',
                        img:'/public/images/swiper/s-03.jpg'
                    }
                ],
            }
        },
        components: {
            // NavHeader,
            // NavFooter,
            Swiper,
            SwiperSlide
        }
    }
</script>

<style lang="scss">

    .container {
        width: 100%;
        color: #d2d2d2;
        .swiper-box {
            margin-top: 70px;
            width: 100%;
            position: relative;
            img {
                width: 100%;
            }
        }
        .hots {
            width: 1800px;
            margin: 0 auto;
            .hot-title {
                display: flex;
                flex-direction: row;
                height: 50px;
                line-height: 50px;
                .hot-tab {
                    font-size: 24px;
                    font-weight: 600;
                    color: #d2d2d2;
                }
                .tab-desc {
                    color: #ccc;
                    font-size: 16px;
                    margin-left: 10px;
                }
            }
            .hot-items {
                display: flex;
                flex-direction: row;
                align-content: space-between;
                overflow: hidden;
                .hot-item {
                    flex: 1;
                    img {
                        width: 210px;
                        height: 117px;
                        border-radius: 3px;
                    }
                    .title {
                        font-size: 16px;
                        a {
                            color: #f8f8f8;
                            text-decoration: none;
                        }
                        a:hover {
                            color: #0D9BFF;
                        }

                    }
                    .desc {
                        font-size: 14px;
                        color: #999999;
                        margin-top: 5px;
                    }
                }
            }
        }
        .categorys {
            width: 1800px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            position: absolute;
            bottom: 250px;
            left: 50px;
            z-index: 999999;
            background-color: rgba(255,255,255,0.03);
            .category-list {
                margin-right: 50px;
                border-right: 1px solid #ccc;
                padding-right: 50px;
                .category-item {
                    display: flex;
                    flex-direction: row;
                    height: 40px;
                    align-items: center;
                    img {
                        width: 24px;
                        height: 24px;
                    }
                    .item-text {
                        margin-left: 10px;
                        font-size: 18px;
                        font-weight: 500;
                    }
                    .item-list {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        width: 170px;
                        div {
                            margin-left: 20px;
                            a {
                                color: #f8f8f8;
                                text-decoration: none;
                            }
                            a:hover {
                                color: #0D9BFF;
                            }
                        }
                    }

                }
            }
            .category-right {
                img {
                    width: 70px;
                    height: 70px;
                    margin-left: 20px;
                }
            }
        }
        .tv-paly-list {
            width: 1800px;
            margin: 0 auto;
            .list-title {
                display: flex;
                flex-direction: row;
                height: 45px;
                align-items: center;
                img {
                    width: 28px;
                    height: 28px;
                }
                img:hover {

                    -webkit-transform: scale(1.1); /*1.1放大值*/
                    -moz-transform: scale(1.1);
                    -o-transform: scale(1.1);
                    -ms-transform: scale(1.1);
                }
                .text {
                    font-size: 24px;
                    font-weight: 600;
                    color: #d2d2d2;
                    margin-left: 8px;
                }
                .more {
                    margin-left: 20px;
                    a {
                        color: #999;
                        font-size: 13px;
                    }
                    a:hover {
                        color: #0D9BFF;
                    }
                }
            }
            .tc-list {
                height: 362px;
                display: flex;
                flex-direction: row;
                .item-first {
                    height: 362px;
                    width: 432px;
                    background-color: #25252b;
                    border-radius: 5px;
                    overflow: hidden;
                    img {
                        width: 100%;
                    }
                    .title {
                        margin: 10px ;
                        a {
                            color: #d2d2d2;
                            font-size: 18px;
                        }
                        a:hover {
                            color: #0D9BFF;
                        }
                    }
                    .desc {
                        margin: 10px ;
                        font-size: 14px;
                        color: #999;
                        padding-bottom: 20px;
                    }
                }
                .list-item {
                    flex: 1;
                    display: flex;
                    display: -webkit-flex;
                    justify-content: space-between;
                    flex-direction: row;
                    flex-wrap: wrap;
                    margin-left: 15px;
                    .hot-item {
                        flex: 1;
                        img {
                            width: 210px;
                            height: 117px;
                            border-radius: 3px;
                        }
                        .title {
                            font-size: 16px;
                            a {
                                color: #f8f8f8;
                                text-decoration: none;
                            }
                            a:hover {
                                color: #0D9BFF;
                            }

                        }
                        .desc {
                            font-size: 14px;
                            color: #999999;
                            margin-top: 5px;
                        }
                    }
                }
            }
        }
    }
</style>